react-d3-basic

react-d3-basic

react-d3 basic charts, charts that we support:

• Line Chart
• Multiple Line Chart
• Scatter Plot
• Area Chart
• Area Stack Chart
• Bar Chart
• Bar Group Chart
• Bar Stack Chart
• Pie Chart
• Donut Chart

Quick example

• Line Chart

"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

(function() {

  var generalChartData = require('./data/user.json');

  var chartSeries = [
      {
        field: 'age',
        name: 'Age',
        color: '#ff7f0e',
        style: {
          "stroke-width": 2,
          "stroke-opacity": .2,
          "fill-opacity": .2
        }
      }
    ],
    x = function(d) {
      return d.index;
    }

  ReactDOM.render(
    <Chart
      width= {600}
      height= {300}
      chartSeries= {chartSeries}
      >
      <LineChart
        width= {600}
        height= {300}
        data= {generalChartData}
        chartSeries= {chartSeries}
        x= {x}
      />
    </Chart>
  , document.getElementById('data_line')
  )
})()

Install

npm install --save react-d3-basic

LIVE DEMO

http://reactd3.org/docs/basic

Docs

Charts

Building Charts.

• Line Chart
• Area Chart
• Area Stack Chart
• Bar Chart
• Bar Group Chart
• Bar Stack Chart
• Scatter Plot
• Pie Chart
• Donut Chart

Detail Components

Chart shapes components

• area
• area stack
• bar
• bar group
• bar stack
• line
• pie
• scatter

inherit

Inherit initial props, state, functions...

• pieLayout
• xyPlot

Utilities

• Series

Gallery

Develop

$ sudo npm i
$ webpack -w

License

Apache 2.0